import { Mask } from 'antd-mobile'
import React from 'react'
import styles from './index.module.less'
import closeImg from '@/resource/home/close.png'
import type { ModalPropsType } from './interface'

const EasyModal = (props: ModalPropsType) => {
    const { onClose, visible, onOk, title, content, showClose, okText } = props

    return visible ? (
        <div className={styles.modal_container} style={{ display: visible ? 'block' : 'none' }}>
            <Mask visible onMaskClick={onClose} />
            <div className={styles.modal_main}>
                <div className={styles.modal_header}>
                    <div className={styles.title}>{title}</div>
                </div>
                <div className={styles.modal_content_wrapper}>
                    <div className={styles.modal_content}>{content}</div>
                    <div className={styles.modal_option}>
                        {onClose && showClose && (
                            <div className={styles.cancel_btn} onClick={onClose}>
                                取消
                            </div>
                        )}
                        <div className={styles.ok_btn} onClick={onOk}>
                            {okText || 'OK'}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ) : null
}

export default EasyModal
